<template>
  <div >
    <el-row >
      <el-card body-style="padding: 0px" style="background-color: #F0FFFF">
        <div slot="header" class="card-header">
          <span>机车信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="4" v-for="(value, key) in trainInfo" :key="key">
            <div class="info-item">
              <el-row>
                <span class="info-label">{{ key | formatLabel }}</span>
              </el-row>
              <el-row>
                <span class="info-value">{{ value }}</span>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TrainExpertInfo',
  data() {
    return {
      trainInfo: {
        locomotiveType: 'HXD2',
        locomotiveNumber: '1051A',
        operator: '前台',
        deviceNumber: '导入',
        currentDownloadTime: '2024-03-07 14:29:15',
        lastDownloadTime: '——'
      }
    }
  },
  filters: {
    formatLabel(value) {
      const labelMap = {
        locomotiveType: '机车类型',
        locomotiveNumber: '机车编号',
        operator: '下载操作员',
        deviceNumber: '下载设备号',
        currentDownloadTime: '本次下载时间',
        lastDownloadTime: '上次下载时间'
      };
      return labelMap[value] || value;
    }
  }
}
</script>

<style scoped>
.train-info-container {
  margin: 20px;
}

.card-header {
  padding: 0px;
  height: 10px;
}

.info-item {
  margin-bottom: 10px;
}

.info-label {
  font-size: 14px;
  color: #909399;
}

.info-value {
  font-size: 16px;
  color: #606266;
}
</style>
